<template>
  <div class="bigHigh_box">
    <TopOne :obj="obj" :getYao="getYao" :datalist="getList" />
    <div class="customTodo_body">
      <TopTwo :todoButton="todoButton" />
      <Table style="width: 100%;" :columns="columns" :data="corpData" :operate="operate" :detailText="detailText" @change="onChange">
      </Table>
      <!-- <Communication></Communication> -->
    </div>
    <MockBox v-if="open" :open="open" :handleOk="handleOk" :data="corpData"/>
    <!-- <updateVue></updateVue> -->

  </div>
</template>

<script setup lang="ts">
//用来进行跳转的
import TopOne from "../../components/topOne.vue";
//用来进行搜索框的
import TopTwo from "../../components/topTwo.vue";

import MockBox from '@/components/mockBox.vue'

// import updateVue from "./components/update.vue";

//封装的button


//table表格来进行封装
import Table from "@/components/Table.vue"
// import axios from "axios";

import { useCounterStore } from '@/store/ticket'

//排序约束
import type { TableColumnType } from 'ant-design-vue';

import { ref, onMounted, computed, reactive } from "vue";
// import { useRouter } from 'vue-router'

import { useRouter } from 'vue-router'
import { lastDays } from "@/utils/method";
// 传给第一个input框的数据
const obj = {
  // 第一个输入框
  inputOne: {
    done: true,
    tishi: "搜索关键词",
  },
  // 后面倒数第二个带小人的输入框
  inputTwo: {
    done: true,
    tishi: "提交人员",
  },
  // 日历输入框
  inputThere: {
    done: true,
    tishi: "提交时间",
  },
  // 3个下拉列表
  selectOne: {
    done: true,
    tishi: "审批状态",
    todoDone: [
      {
        value: "没有跟进",
        label: "没有跟进",
      },
      {
        value: "正在跟进",
        label: "正在跟进",
      },
    ],
  },
  selectTwo: {
    done: true,
    tishi: "公司类型",
    todoDone: [
      {
        value: "个人用户",
        label: "个人用户",
      },
      {
        value: "企业用户",
        label: "企业用户",
      },
    ],
  },
  selectThere: {
    done: false,
    tishi: "客户星级",
    todoDone: [
      {
        label: "⭐",
        value: "1",
      },
      {
        label: "⭐⭐",
        value: "2",
      },
      {
        label: "⭐⭐⭐",
        value: "3",
      },
    ],
  },
};
const store = useCounterStore()

const corpData: any = ref([{}])






const getList = async () => {
  console.log('我别响应了')
  const res:any = await store.interface_getCorp()
  res.map((item:any) => {
    // console.log(item.last_follow_up_date.slice(0, 10))
    item.last_follow_up_date = item.last_follow_up_date.slice(0, 10)
    const differenceInDays = lastDays(item.last_follow_up_date)
    item.differenceInDays = `${differenceInDays}天`
    return item
  })
  let nos:any = res.filter((item:any)=>{
    if(item.follow_up_status==='复杂'){
      // console.log(item)
      return item
    }
  })
  corpData.value = nos
  console.log(nos, '我是res')
}
// onMounted(() => )
// 获取到input的数据
function getYao(value: any) {
  if (value.inputOne) {
    corpData.value = corpData.value.filter((item: { corpName: string | any[]; }) => {
      if (item.corpName.includes(value.inputOne)) {
        return item
      }
    })
  }
  if (value.inputThere) {
    corpData.value = corpData.value.filter((item: { last_follow_up_date: string | any[]; }) => {
      if (item.last_follow_up_date.includes(value.inputThere)) {
        return item
      }
    })
  }

  if (value.selectOne) {
    corpData.value = corpData.value.filter((item: { corpState: any; }) => {
      if (value.selectOne === item.corpState) {
        return item
      }
    })
  }
  if (value.selectTwo) {
    corpData.value = corpData.value.filter((item: { user_type: any; }) => {
      if (item.user_type == value.selectTwo) {
        return item
      }
    })
  }
  console.log(value, 'value');
}

// 点击跳转到详情并传递路由 ----- 用于跳转到详细信息
let detailText = reactive({
  nameOne: "公司名称",
  goTo: "../finance/backguanli"
})


// 操作页面传入的数据
const operate = ref([
  {
    icon: 'icon-genjin',
    title: '跟进',
    click: (_key: any) => { followUp(_key) }
  },
  {
    icon: 'icon-bianji',
    title: '编辑',
    click: (_key: any) => { emitOne(_key) }
  },
  {
    icon: 'icon-zhiding',
    title: '置顶',
    click: (_key: any) => { topping(_key) }
  },
  {
    icon: 'icon-shanchu',
    title: '删除',
    // 括号中的为整列信息 可以切换成别的
    click: (_key: any) => { delOne(_key) }
  }
])
// 声明弹框状态
const open = ref<boolean>(false);
const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

let dataFinance = ref<any[]>()


//表格跟进
const followUp = (val: any) => {
  // console.log('我是跟进', val)
  // dialogVisible2.value = true
  open.value = true
}

//表格编辑
const emitOne = (val: any) => {
  console.log('我是编辑', val)
  store.getEmitData(JSON.stringify(val))
  rou.push('/home/addtwo')
}
//表格置顶
const topping = (val: any) => {
  console.log('我是置顶', val)
  corpData.value.unshift(val)
}

//表格删除
const delOne = (val: any) => {
  console.log('我是删除', val)
  corpData.value = corpData.value.filter((item:any)=>{
    if(item.id !== val.id){
      return item
    }
  })
}

// 传给一排按钮的数据+方法
const todoButton = [
  { id: 1, name: '添加', fn: addOne, icon: '&#xe613;' },
  { id: 2, name: '导入', icon: '&#xe637;' },
  { id: 3, name: '导出', icon: '&#xe61b;' },
  { id: 4, name: '新建任务', icon: '&#xe697;' },
  { id: 5, name: '转移客户', icon: '&#xea34;' },
  { id: 6, name: '移入公海', icon: '&#xe804;' },
  { id: 7, name: '合并客户', icon: '&#xe628;' },
  { id: 8, name: '批量编辑', icon: '&#xe65d;' },
]

// 给按钮绑定事件
function addOne() {
  // console.log("添加");
  rou.push('/home/addtwo')

}
// import axios from 'axios';
// const corpData: Ref<CorporateData[]> = ref([
//   {
//     id: 999,
//     corpName: "先属精们里。",
//     corpState: "没有跟进",
//     starRating: "★★",
//     cdetailNumber: 999,
//     user_type: "企业用户",
//     address: "澳门特别行政区",
//     follow_up_status: "正常",
//     last_follow_up_date: "1900-09-1901T1:5:17.000Z",
//     industry: "汽车",
//     primary_contact: "颜如玉",
//     birthday: "2002-01-06T1:0:00.000Z",
//     title: "Fdck",
//     phone_number: "13860837637",
//     opportunity_id: 300,
//     previous_follower_id: null,
//     follower_id: null
//   }
// ]);

// 获取数据
// watchEffect(() => {
//   if (corpData.value.length < 0) {
//     getCorp();
//   }
// });

onMounted(() => {
  // getCorp()
  getList()
})
// const getCorp = async () => {
//   //通过 try和catch来进行方式发出意外的错误，用来进行防止整个页面崩溃
//   try {
//     // 执行异步操作，获取外部数据
//     const res = await getCropData()
//     // 对获取到的数据进行处理
//     res.data.map(item => {
//       // console.log(item.last_follow_up_date.slice(0, 10))
//       item.last_follow_up_date = item.last_follow_up_date.slice(0, 10)
//       const differenceInDays = lastDays(item.last_follow_up_date)
//       item.differenceInDays = `${differenceInDays}天`
//       return item
//     })
//     console.log(res.data)
//     corpData.value = res.data;
//   } catch (error) {
//     console.error(error);
//   }
// };

// 表格按钮
let rou = useRouter()
function handleEdit(am: any) {
  rou.push('/home/please/dalite')
  console.log(am, "am");
}


// let handleDelete = async (index: number) => {
//   try {
//     const response = await axios.post("http://localhost:3000/del", {
//       key: `${index}`,
//     });
//     console.log("POST 请求成功:", response.data);
//     datalist();
//   } catch (error) {
//     console.error("POST 请求失败:", error);
//   }
// };

let multipleSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}

const filteredInfo = ref();
const sortedInfo = ref();


interface DataItem {
  corpName: any;
  key: string;
  name: string;
  age: number;
  address: string;
}

//用来给table传入columns的，他是一个列表，用来表示你自己的字段
const columns = computed<TableColumnType[]>(() => {
  const sorted = sortedInfo.value || {};
  return [
    {
      title: '公司名称',
      dataIndex: 'corpName',
      key: 'corpName',
      sorter: (a: DataItem, b: DataItem) => a.corpName.localeCompare(b.corpName, 'zh'),
    },
    {
      title: '公司状态',
      dataIndex: 'corpState',
      key: 'corpState',
    },
    {
      title: '公司星级',
      dataIndex: 'starRating',
      key: 'starRating',
    },
    {
      title: '首联系人',
      dataIndex: 'primary_contact',
      key: 'primary_contact',
    },
    {
      title: '手机号码',
      dataIndex: 'phone_number',
      key: 'phone_number',
    },
    {
      title: '最后跟进',
      dataIndex: 'last_follow_up_date',
      key: 'last_follow_up_date',
      sorter: {
        compare: (a, b) => a.last_follow_up_date - b.last_follow_up_date,
        multiple: 3,
      },
    },
    {
      title: '最后天数',
      dataIndex: 'differenceInDays',
      key: 'differenceInDays',
      sorter: (a: DataItem, b: DataItem) => a.age - b.age,
      sortOrder: sorted.columnKey === 'differenceInDays' && sorted.order,
    },
    {
      title: '操作',
      dataIndex: 'differenceInDays',
      key: 'differenceInDays',
      width: '20%',
    },
  ];
});

function onChange(pagination: any, filters: any, sorter: any, extra: any) {
  console.log('params', pagination, filters, sorter, extra);
}


</script>

<style scoped lang="scss"></style>